<template>
  <div>
    <a-form :form="form" style="max-width: 600px; margin: 40px auto 0;">
      <a-form-item
        label="任务名称"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
       <a-input v-decorator="['task_name', {rules: [{required: true, message: '任务名称必须填写'}]}]" />
      </a-form-item>
      <a-form-item
        label="发布人"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input v-model="name" disabled/>
      </a-form-item>
      <a-form-item
        label="任务目标"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input v-decorator="['task_target', {rules: [{required: true, message: '发布目标必须填写'}] }]"/>
      </a-form-item>
      <a-form-item
        label="任务简介"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input v-decorator="['descs', {rules: [{required: true, message: '任务简介必须填写'}]}]" />
      </a-form-item>
      <!-- <a-form-item
        label="发布时间"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-date-picker v-decorator="['release_time']"
            show-time
            valueFormat="YYYY-MM-DD HH:mm:ss"
            type="date"
            placeholder="发布时间"
            style="width: 100%;"
          />
      </a-form-item> -->
      <a-form-item
        label="截至时间"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-date-picker v-decorator="['endtime', {rules: [{required: true, message: '截至时间必须填写'}]}]"
            show-time
            valueFormat="YYYY-MM-DD HH:mm:ss"
            type="date"
            placeholder="截至时间"
            style="width: 100%;"
          />
      </a-form-item>
    <a-form-item
        label="任务分类"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
     	<a-select
					v-decorator="['taskcate_id', {rules: [{required: true, message: '请选择'}]}]" 
					show-search
					placeholder="请选择"
					option-filter-prop="children"
					:filter-option="filterOption"
        >
					<a-select-option :value="item.id" v-for="(item) in taskList" :key="item.id">
						{{item.title}}
					</a-select-option>
        </a-select>
    </a-form-item>
    <a-form-item
        label="任务附件"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
			<a-upload
          name="file"
          :multiple="true"
          action="index.php/?s=App.Examples_Upload.Go"
          :headers="headers"
					@change=handleCertChange
        >
          <a-button> <a-icon type="upload" /> 上传附件 </a-button>
		</a-upload>
    </a-form-item>
			<a-form-item
        label="监督员能否查看"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-select v-decorator="['is_view', {rules: [{required: true, message: '请选择'}]}]" placeholder="请选择" default-value="1">
            <a-select-option value="1">是</a-select-option>
            <a-select-option value="2">否</a-select-option>
        </a-select>
      </a-form-item>
    <a-form-item
        label="学校"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-tree
          v-model="checkedKeys"
          checkable
          :tree-data="treeData"

          @expand="onExpand"
          @select="onSelect"
          @check="onCheck"
        />
    </a-form-item>
      <a-form-item :wrapperCol="{span: 19, offset: 12}">
        <a-button type="primary" @click="nextStep">下一步</a-button>
      </a-form-item>
    </a-form>
    
    <a-divider />
  </div>
</template>

<script>
import { getUserList } from '../../../api/system'
import { GetTaskList } from '../../../api/school'
import { SchoolRecursion } from '../../../api/system'

const options = []
export default {
  name: 'Step1',
  data () {
    return {
      checkedKeys: [],
      // 学校标签
      treeData: [],
      name: '',
			// 任务附件
			headers: {
        authorization: 'authorization-text',
      },
			certFileScource: '',
			// 任务分类
			taskList: [],
			// 获取学校列表
			options,
      value: [],
			// 用户列表
			roleList: [],
      labelCol: { lg: { span: 5 }, sm: { span: 10 } },
      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
      form: this.$form.createForm(this)
    }
  },
	mounted() {
		// 调用方法获取用户列表
    this.UsersGetRoLeList ()
		// 调用方法获取学校标签
    this.GetSchoolRecursion()
		// 调用方法获取分类列表
		this.UsersGetTaskList()
    this.name = localStorage.getItem('username')
	},
  watch: {
    checkedKeys(val) {
      console.log('已经选中的选项', val)
    }
  },
  methods: {
		// 任务附件
		handleCertChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`);
				console.log('------------------------url-------------',info.file.response )
        this.certFileScource = info.file.response.data.url
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
		// 获取学校标签列表
    GetSchoolRecursion() {
      SchoolRecursion().then(res => {
        console.log('学校标签', res)
        this.treeData = res.data
      })
    },
		// 获取任务分类列表
		UsersGetTaskList () {
      GetTaskList().then(res => {
        this.taskList = res.data.data
      })
    },
		// 获取用户列表
    UsersGetRoLeList () {
      getUserList().then(res => {
        this.roleList = res.data.data
      })
    },
    nextStep () {
      const { form: { validateFields } } = this
      // 先校验，通过表单校验后，才进入下一步
      validateFields((err, values) => {
        values.category_id = this.checkedKeys
				values.file = this.certFileScource
				values.school_id = this.value
        if (!err) {
          this.$emit('nextStep', values)
        }
      })
    },
		onChange(checkedValues) {
      console.log('checked = ', checkedValues);
      console.log('value = ', this.value);
    },
		// 搜素模糊查询
		filterOption(input, option) {
			return (
		option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
			)
		},
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      console.log('onCheck', checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      console.log('onSelect', info);
      this.selectedKeys = selectedKeys;
    },
  }
}
</script>

<style lang="less" scoped>
.step-form-style-desc {
  padding: 0 56px;
  color: rgba(0,0,0,.45);
  h3 {
    margin: 0 0 12px;
    color: rgba(0,0,0,.45);
    font-size: 16px;
    line-height: 32px;
  }
  h4 {
    margin: 0 0 4px;
    color: rgba(0,0,0,.45);
    font-size: 14px;
    line-height: 22px;
  }
  p {
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 22px;
  }
}
</style>